<html>
<head>
    <meta charset="utf-8" >
    <title>{{title}}</title>
    <script src="echarts.js"></script>
</head>
<body>
    <div id="main" style="width:1000px;height:400px"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"));
        var option = {
            title:{name:"{{title}}"},
            legend:{
                data:{{data["legend"]|safe}},
            },
            tooltip:{
                trigger:"item",
                formatter:"{a}:{c}",
            },
            grid:{left:"10%"},
            xAxis:{data:{{data["x"]|safe}}},
            yAxis:{type:"value",data:{{data["y"]|safe}}},
            series:{{data["series"]|safe}}, 
            dataZoom:[{
                type:"slider",
                xAxisIndex:0,
                },{
                type:"slider",
                yAxisIndex:0,
                }
            ],
            toolbox:{
                orient:"vertical",
                top:"center",
                left:"2%",
                feature:{
                    restore:{},
                    dataZoom:{}
                }
             }
            };
        myChart.setOption(option);
    </script>
</body>
</html>
